﻿<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>头部导航</title>
	<style>
.navbar {
    font-size: 18px;
}
.navbar-header a {
    font-size: 21px;
    font-weiht: 800;
}
</style>
	<link href="favicon.ico" rel="shortcut icon">
	<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
	</head>
	<body>
<div class="container">
      <nav class="navbar navbar-default navbar-fixed-top row" role="navigation">
    <div class="container-fluid  col-lg-offset-2">
          <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="#" >论坛</a> </div>
          <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav head-nav" id="nav_head">
              <li id="index" class="active"><a href="/Home.html">首页</a></li>
              <li id="Driver"><a href="/Driver/DriverIndex.html">老司机</a></li>
              <li><a href="#">聊天室</a></li>
              <li id="Promote"><a href="/Promote/Promote.html">学习资源</a></li>
              <li class="login-res"><a href="/login">登陆</a></li>
              <li class="login-res"><a href="/registered">注册</a></li>
              <li class="dropdown removelogin res-login" id="personal"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 登陆管理 <b class="caret"></b> </a>
            <ul class="dropdown-menu">
                  <li><a href="/personal">我的主页</a></li>
                  <li class="divider"></li>
                  <li><a href="#">设置</a></li>
                  <li class="divider"></li>
                  <li><a href="#">退出</a></li>
                </ul>
          </li>
            </ul>
        <div class="col-lg-offset-2">
              <form class="navbar-form navbar-left " role="search">
            <div class="form-group">
                  <input type="text" class="form-control" placeholder="search">
                </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
            </div>
      </div>
        </div>
  </nav>
    </div>
<script>
		$(function(){
			/*请求前端demo数据，判断是否登陆*/
			/*需要修改提交状态为post*/
			/*data数据为cookie表中的user和pass*/
			/*是否加密为md5由后端决定*/
			$.ajax({
				type:'get',
				url:'/demo/checklogin.json',
				datatype:'json',
				data:'',
				success:function(data){
					//console.log("请求成功ing");
					if(data.judge==="true"){
						$(".login-res").remove();
						console.log("已登陆ing");
					}
					else{
						$(".res-login").remove();
						console.log("未登陆ing");
					}
				},
				error:function(jqXHR,text,errorThorw){
					console.log(text);
					console.log(errorThorw);
				}
			});
			if($.cookie('token')==null)
				{
					$(".res-login").remove();
				}
			else{
					
					$(".login-res").remove();
				}
			
			//切换点击效果
			$(".head-nav li").click(function(){
				//console.log("点击"+$(this).html());
				$(".active").removeClass("active");
				$(this).addClass("active");
			})
		});
		
		
		function GetUrlRelativePath()
　　	{
　　　　var url = document.location.toString();
　　　　var arrUrl = url.split("//");

　　　　var start = arrUrl[1].indexOf("/");
　　　　var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符

　　　　if(relUrl.indexOf("?") != -1){
　　　　　　relUrl = relUrl.split("?")[0];
　　　　}
　　　　return relUrl;
　　	}
		
		var url = GetUrlRelativePath();
		var field=url.split('/')[1];
		console.log(field);
		
		$("#nav_head li").removeClass("active");
	    switch(field){
			case "Driver":
				$("#Driver").addClass("active");
				break;
			case "personal":
				$("#personal").addClass("active");
				break;
			case "Promote":
				$("#Promote").addClass("active");
				break;
			default:
				$("#index").addClass("active");
		}
		
		
	</script>
</body>
</html>
<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>头部导航</title>
	<style>
.navbar {
    font-size: 18px;
}
.navbar-header a {
    font-size: 21px;
    font-weiht: 800;
}
</style>
	<link href="favicon.ico" rel="shortcut icon">
	<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
	</head>
	<body>
<div class="container">
      <nav class="navbar navbar-default navbar-fixed-top row" role="navigation">
    <div class="container-fluid  col-lg-offset-2">
          <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="#" >论坛</a> </div>
          <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav head-nav" id="nav_head">
              <li id="index" class="active"><a href="/Home.html">首页</a></li>
              <li id="Driver"><a href="/Driver/DriverIndex.html">老司机</a></li>
              <li><a href="#">聊天室</a></li>
              <li id="Promote"><a href="/Promote/Promote.html">学习资源</a></li>
              <li class="login-res"><a href="/login">登陆</a></li>
              <li class="login-res"><a href="/registered">注册</a></li>
              <li class="dropdown removelogin res-login" id="personal"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 登陆管理 <b class="caret"></b> </a>
            <ul class="dropdown-menu">
                  <li><a href="/personal">我的主页</a></li>
                  <li class="divider"></li>
                  <li><a href="#">设置</a></li>
                  <li class="divider"></li>
                  <li><a href="#">退出</a></li>
                </ul>
          </li>
            </ul>
        <div class="col-lg-offset-2">
              <form class="navbar-form navbar-left " role="search">
            <div class="form-group">
                  <input type="text" class="form-control" placeholder="search">
                </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
            </div>
      </div>
        </div>
  </nav>
    </div>
<script>
		$(function(){
			/*请求前端demo数据，判断是否登陆*/
			/*需要修改提交状态为post*/
			/*data数据为cookie表中的user和pass*/
			/*是否加密为md5由后端决定*/
			$.ajax({
				type:'get',
				url:'/demo/checklogin.json',
				datatype:'json',
				data:'',
				success:function(data){
					//console.log("请求成功ing");
					if(data.judge==="true"){
						$(".login-res").remove();
						console.log("已登陆ing");
					}
					else{
						$(".res-login").remove();
						console.log("未登陆ing");
					}
				},
				error:function(jqXHR,text,errorThorw){
					console.log(text);
					console.log(errorThorw);
				}
			});
			if($.cookie('token')==null)
				{
					$(".res-login").remove();
				}
			else{
					
					$(".login-res").remove();
				}
			
			//切换点击效果
			$(".head-nav li").click(function(){
				//console.log("点击"+$(this).html());
				$(".active").removeClass("active");
				$(this).addClass("active");
			})
		});
		
		
		function GetUrlRelativePath()
　　	{
　　　　var url = document.location.toString();
　　　　var arrUrl = url.split("//");

　　　　var start = arrUrl[1].indexOf("/");
　　　　var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符

　　　　if(relUrl.indexOf("?") != -1){
　　　　　　relUrl = relUrl.split("?")[0];
　　　　}
　　　　return relUrl;
　　	}
		
		var url = GetUrlRelativePath();
		var field=url.split('/')[1];
		console.log(field);
		
		$("#nav_head li").removeClass("active");
	    switch(field){
			case "Driver":
				$("#Driver").addClass("active");
				break;
			case "personal":
				$("#personal").addClass("active");
				break;
			case "Promote":
				$("#Promote").addClass("active");
				break;
			default:
				$("#index").addClass("active");
		}
		
		
	</script>
</body>
</html>
